<template>
  <a-modal style="top:5%;height:95%" :title="title" width="500" :visible="visible"
  :confirmLoading="confirmLoading" cancelText="关闭" wrapClassName="ant-modal-cust-warp"
  @ok="handleSubmit" @cancel="handleCancel">
    <a-directory-tree :loadData="onLoadData" treeData="treeData" @select="onSelect"></a-directory-tree>
  </a-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: "FileSelectModal",
    data: function() {
      return {
        title: "选择文件目录",
        visible: !1,
        confirmLoading: !1,
        treeData: [],
        fileTreeUrl: "/online/cgform/head/fileTree",
        rootFileUrl: "/online/cgform/head/rootFile",
        selectedKey: ""
      }
    },
    created: function() {
      this.loadRoot()
    },
    methods: {
      handleSubmit() {
        this.$emit("callback", this.selectedKey),
          this.visible = !1
      },
      handleCancel() {
        this.visible = !1
      },
      show() {
        this.visible = !0,
          this.selectedKey = ""
      },
      loadRoot() {
        var e = this;
        httpAction(this.rootFileUrl, {}).then((function(t) {
          t.success && (e.treeData = t.result)
        }))
      },
      onLoadData(e) {
        var t = this;
        return new Promise((function(n) {
          if (e.dataRef.children) n();
          else {
            var r = {
              parentPath: e.dataRef.key
            };
            httpAction(t.fileTreeUrl, r).then((function(r) {
              console.log(t.treeData);
              r.success && (e.dataRef.children = r.result, t.treeData = (t.treeData)),
                n()
            }))
          }
        }))
      },
      onSelect(e) {
        this.selectedKey = e[0]
      }
    }
  }
</script>